<template>
  <q-layout>
    <template #header>
      <van-button type="primary" @click="commit">主要按钮</van-button>
    </template>
    <div class="border"></div>
		<div class="bg" style="width:500px;height:300px;margin:0 auto">
			<Mq :config="config"></Mq>
		</div>
    <img class="inline border-2 border-red-300 border-soild" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <van-button type="primary">主要按钮{{ store.getCount }}</van-button>
  </q-layout>
</template>

<script lang="ts">
import {
	defineComponent,
	getCurrentInstance,
	ComponentInternalInstance,
	ref,
} from 'vue';
import Mq from '@components/mq.vue';
import HelloWorld from '@components/HelloWorld'; // @ is an alias to /src
import qLayout from '@components/layout/q-layout';
import { useStore } from '@/store/index';
export default defineComponent({
	name: 'Home',
	components: {
		HelloWorld,
		qLayout,
		Mq,
	},
	setup(props, ctx) {
		const store = useStore();
		let { proxy } = getCurrentInstance() as ComponentInternalInstance;
		// console.log(proxy?.$dialog);
		const commit = (g: Number) => {
			console.log('laiba--');
		};
		let data = ref([] as any[]);
		let config = ref({
			header:{
				data:['名称','类型','状态','情况','日期'],
				height: 40,
				color:'#fff',
				borderColor: 'pink',
				borderSize:1,
			},
			data: data,
			pageSize: 7,
		});
		setTimeout(() => {
			data.value = [
				{ id: '1', value: [1, 2, 3, 4, 5] },
				{ id: '2', value: [1, 2, 3, 4, 5] },
				{ id: '3', value: [1, 2, 3, 4, 5] },
				{ id: '4', value: [1, 2, 3, 4, 5] },
				{ id: '5', value: [1, 2, 3, 4, 5] },
				{ id: '6', value: [1, 2, 3, 4, 5] },
				{ id: '7', value: [1, 2, 3, 4, 5] },
				{ id: '8', value: [1, 2, 3, 4, 5] },
				{ id: '9', value: [1, 2, 3, 4, 5] },
				{ id: '10', value: [1, 2, 3, 4, 5] },
				{ id: '11', value: [1, 2, 3, 4, 5] },
				{ id: '12', value: [1, 2, 3, 4, 5] },
				{ id: '13', value: [1, 2, 3, 4, 5] },
				{ id: '14', value: [1, 2, 3, 4, 5] },
				{ id: '15', value: [1, 2, 3, 4, 5] },
				{ id: '16', value: [1, 2, 3, 4, 5] },
				{ id: '17', value: [1, 2, 3, 4, 5] },
				{ id: '18', value: [1, 2, 3, 4, 5] },
				{ id: '19', value: [1, 2, 3, 4, 5] },
				{ id: '20', value: [1, 2, 3, 4, 5] },
			];
			console.log(config.value);
		}, 2000);
		return { store, commit, config };
	},
});
</script>
<style>
.border {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}
.bg{
	background: url('../assets/main-bg.png') no-repeat;
	background-size: 100% 100%;
}
</style>
